<template>
	<view class="family-manage-page">
	  <!-- 顶部导航栏 -->
	  <view class="header">
		<text class="header-title">家庭管理</text>
		<view class="header-actions">
		  <image src="@/static/images/icon/more.png" class="icon-more"></image>
		  <image src="@/static/images/icon/camera.png" class="icon-camera"></image>
		</view>
	  </view>
  
	  <!-- 顶部切换栏 -->
	  <view class="tab-bar">
		<view
		  v-for="(tab, idx) in tabList"
		  :key="tab.id"
		  :class="['tab-btn', currentTab === idx ? 'active' : '']"
		  @click="currentTab = idx"
		>
		  {{ tab.name }}
		</view>
	  </view>
  
	  <!-- 家庭卡片 -->
	  <view class="family-card">
		<view class="family-info">
		  <image src="@/static/images/img/home.png" class="family-icon"></image>
		  <view class="family-desc">
			<view class="family-name">大橘子的小窝</view>
			<view class="family-pet-count">
			  <text class="pet-count-badge">当前家庭3个宠物</text>
			</view>
		  </view>
		</view>
		<view class="family-member-count">共2个家人</view>
		<view class="family-members">
		  <view class="member-row" v-for="i in 4" :key="i">
			<image src="@/static/images/img/avatar.png" class="member-avatar"></image>
			<text class="member-name">无敌大橘子</text>
			<image src="@/static/images/icon/delete.png" class="member-delete"></image>
		  </view>
		</view>
		<button class="btn-disband">解散家庭</button>
	  </view>
  
	  <!-- 底部按钮 -->
	  <view class="footer">
		<button class="btn-invite">邀请成员</button>
	  </view>
	  <tabBar />
	</view>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const tabList = [
	{ name: '我创建的家庭', id: 0 },
	{ name: '我加入的家庭', id: 1 }
  ]
  const currentTab = ref(0)
  </script>
  
  <style lang="scss" scoped>
  .family-manage-page {
	min-height: 100vh;
	background: #f3f5f9;
	padding-bottom: 160rpx;
  }
  .header {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 100rpx;
	.header-title {
	  font-size: 36rpx;
	  font-weight: 600;
	  color: #000;
	  margin-top: 40rpx;
	}
	.header-actions {
	  position: absolute;
	  right: 40rpx;
	  top: 40rpx;
	  display: flex;
	  gap: 24rpx;
	  .icon-more, .icon-camera {
		width: 40rpx;
		height: 40rpx;
	  }
	}
  }
  .tab-bar {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 40rpx 0 0 0;
	gap: 24rpx;
	.tab-btn {
	  padding: 0 40rpx;
	  height: 80rpx;
	  line-height: 80rpx;
	  border-radius: 100rpx;
	  background: #fff;
	  color: #333;
	  font-size: 28rpx;
	  font-weight: 500;
	  &.active {
		background: #000;
		color: #fff;
	  }
	}
  }
  .family-card {
	margin: 40rpx 24rpx 0 24rpx;
	background: #fff;
	border-radius: 24rpx;
	box-shadow: 0 4rpx 34rpx 0 rgba(0,0,0,0.02);
	padding: 32rpx 24rpx 24rpx 24rpx;
	.family-info {
	  display: flex;
	  align-items: center;
	  .family-icon {
		width: 100rpx;
		height: 100rpx;
	  }
	  .family-desc {
		margin-left: 24rpx;
		.family-name {
		  font-size: 30rpx;
		  font-weight: 600;
		  color: #222;
		}
		.family-pet-count {
		  margin-top: 12rpx;
		  .pet-count-badge {
			display: inline-block;
			background: #dbe3ff;
			color: #4761f4;
			font-size: 24rpx;
			border-radius: 80rpx;
			padding: 8rpx 24rpx;
		  }
		}
	  }
	}
	.family-member-count {
	  margin: 24rpx 0 0 0;
	  font-size: 24rpx;
	  color: #666;
	  font-weight: 500;
	}
	.family-members {
	  margin-top: 12rpx;
	  .member-row {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 24rpx;
		margin-bottom: 18rpx;
		padding: 16rpx 0;
		box-shadow: 0 2rpx 8rpx 0 rgba(0,0,0,0.01);
		.member-avatar {
		  width: 64rpx;
		  height: 64rpx;
		  border-radius: 50%;
		  margin-left: 20rpx;
		}
		.member-name {
		  flex: 1;
		  margin-left: 24rpx;
		  font-size: 28rpx;
		  color: #000;
		  font-weight: 500;
		}
		.member-delete {
		  width: 40rpx;
		  height: 40rpx;
		  margin-right: 20rpx;
		}
	  }
	}
	.btn-disband {
	  width: 100%;
	  height: 90rpx;
	  margin-top: 24rpx;
	  border-radius: 100rpx;
	  background: linear-gradient(90deg, #4761F4 3%, #963BFF 99%);
	  color: #fff;
	  font-size: 28rpx;
	  font-weight: 600;
	  border: none;
	}
  }
  .footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 40rpx;
	display: flex;
	justify-content: center;
	z-index: 10;
	.btn-invite {
	  width: 538rpx;
	  height: 108rpx;
	  border-radius: 400rpx;
	  background: #c0ff00;
	  color: #000;
	  font-size: 32rpx;
	  font-weight: bold;
	  border: none;
	  box-shadow: 0 4rpx 34rpx 0 rgba(0,0,0,0.02);
	}
  }
  </style>